<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>录入自定义页面</title>

	<!-- 引入 css -->
	<link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
	<!-- 引入 js -->
	<script src="/admin/plugin/wangEditor/index.js"></script>

	<!--引入 element-ui 的样式，-->
	<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
	<!-- 必须先引入vue，  后使用element-ui -->
	<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
	<!-- 引入element 的组件库-->
	<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

	<script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

	<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
	<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">


	<style>
		.changeLHight .el-form-item__label{
			line-height: 16px !important;
		}
		.el-progress-bar__outer{
			background-color: #909399;
		}

		.el-form-item {
			margin-bottom: 0px;
		}
	</style>

</head>
<body>

<div id="app">

	<div style="text-align: center">
		<el-progress :text-inside="true" :stroke-width="26" :show-text="true" :format="formatProgress"  :percentage="percentage"></el-progress>
		<div>{{textPro}}</div>

		<a v-if="isDown" :href="wwwpath" >下载</a>
	</div>

	<div>
		<el-form :inline="true"  class="demo-form-inline">
			<el-form-item label="全选/反选：">
				<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>

			</el-form-item>

			<el-form-item label="导出字段选择：">
				<el-checkbox v-for="(item,index) in columns" v-model="column_selects[item.col_name]" :label="item.show_name" ></el-checkbox>
			</el-form-item>

		</el-form>

	</div>






</div>

<script>
	var E = window.wangEditor; // 全局变量
</script>
<script>




	var vm = new Vue({
		el: '#app',
		data: {
			percentage:0,
			textPro:"",
			wwwpath:"",
			isDown:false,
			parmsData:{},
			column_selects:{},
			columns:[],
			isIndeterminate: true,
			checkAll: false,
		},
		created(){
			this.parmsData = getParams();
			if(this.parmsData.tableId == undefined){
				this.getProgress();
			}else {
				this.getColumns();
			}
		},
		methods:{
			handleCheckAllChange(){
				this.isIndeterminate = false;
				if(this.checkAll){
					for(let key in this.columns){
						let mo = this.columns[key];
						this.column_selects[mo.col_name] = true;
					}
				}else {
					for(let key in this.columns){
						let mo = this.columns[key];
						this.column_selects[mo.col_name] = false;
					}
				}
			},
			async getColumns(){
				const res = await post("/admin/api/DataManagementController/getExpExcelColumns",{tableId:this.parmsData.tableId});
				this.columns = res.data.list;
				this.column_selects = res.data.column_selects;
			},
			formatProgress(p){
				return p+"%";
			},
			async getProgress(){
				const res = await post("/admin/api/DataManagementController/getExpExcelPro",{});
				if(res.code == 0){
					this.percentage = 0;
				}else {
					if(parseInt(res.data.pro)<100){
						this.getProgress();
					}else {
						this.isDown = true;
					}
					this.percentage = res.data.pro;
					this.textPro = res.data.msg;
					this.wwwpath = res.data.path;
				}

			},

		},

	})


	//验证必填项
	function verification() {
		let a = 0;
		for(let zygl in vm.formInline){
			let map = vm.formInline[zygl];
			try {
				vm.submitForm("ruleForm",a);
				a++;
			}catch (e){}
		}
		for(let zygl in vm.formInline){
			let map = vm.formInline[zygl];
			for(let key in map){
				try {
					let value = map[key];
					if(vm.rules[zygl][key] != undefined && value == ""){
						top.alert("红*号必输项不能为空!");
						return false;
					}
				}catch (e){}
			}

		}
		return true;
	}

	function getData() {
		console.log(vm.formInline)
		return vm.formInline;
	}


	function setData(data) {
		if(Object.keys(data).length > 0){
			vm.formInline = data;
		}

	}
</script>


</body>
</html>
